<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>工程师工作台</title>
    <style>
        :root {
            --primary-blue: #2c3e50;
            --accent-orange: #e67e22;
            --background: #f5f6fa;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: var(--background);
            margin: 0;
            padding: 20px 0;
        }

        .main-wrapper {
            width: 1200px;
            margin: 0 auto;
        }

        .module {
            background: white;
            width: 100%;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            padding: 25px;
        }

        .header-module {
            background: var(--primary-blue);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .task-item {
            padding: 15px;
            margin: 10px 0;
            border-left: 4px solid;
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 20px;
            align-items: center;
            transition: opacity 0.3s ease;
        }

        .urgent-task {
            border-color: var(--accent-orange);
            background: #fff4e6;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .stat-card {
            padding: 20px;
            border-radius: 6px;
            text-align: center;
        }

        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.2s;
            height: min-content;
        }

        .btn-primary {
            background: var(--primary-blue);
            color: white;
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .task-info h3 {
            margin: 0 0 8px 0;
            font-size: 16px;
        }

        .task-info p {
            margin: 4px 0;
            color: #666;
        }

        .out_login{
                display: flex;
                border: 2px solid #666;
                border-radius: 10px;
                padding-left: 2px;
                padding-right: 2px;
                color:#666;
                font-size: 1rem;
                height: auto;
        }

        #order-container {
            margin-top: 15px;
            transition: max-height 0.4s ease-out, opacity 0.3s ease;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }

        #order-container.show {
            max-height: 2000px;
            opacity: 1;
        }

        /* 新增空状态样式 */
        .no-tasks {
            text-align: center;
            padding: 30px;
            color: #7f8c8d;
            font-style: italic;
            background: #f9f9f9;
            border-radius: 6px;
            margin: 10px 0;
        }
        .loading-indicator {
        padding: 15px;
        text-align: center;
        color: #666;
        animation: pulse 1.5s infinite;
    }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .task-list-enter-active, .task-list-leave-active {
            transition: all 0.3s ease;
            max-height: 1000px;
            overflow: hidden;
        }
        .task-list-enter, .task-list-leave-to {
            opacity: 0;
            max-height: 0;
        }
        /* 增加空状态样式 */
        .empty-state {
            padding: 30px;
            text-align: center;
            border: 2px dashed #ddd;
            background: #f9f9f9;
            color: #666;
            border-radius: 8px;
            margin: 15px 0;
        }

        .empty-state img {
            width: 80px;
            opacity: 0.6;
            margin-bottom: 15px;
        }

        /* 更新加载动画 */
        .loading-indicator::after {
            content: " ";
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-left: 10px;
            border-radius: 50%;
            border: 2px solid var(--primary-blue);
            border-color: var(--primary-blue) transparent var(--primary-blue) transparent;
            animation: loading 1.2s linear infinite;
        }

        @keyframes loading {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="main-wrapper">
        <!-- 头部 -->
        <div class="module header-module">
            <h1>售后工程师工作台</h1>
            <a href="./index.html" class="out_login">退出登录</a>
        </div>

        <!-- 当前任务 -->
        <div class="module">
            <div class="title-bar">
                <h2>当前任务</h2>
<<<<<<< HEAD
                <button id="toggle-orders-btn" class="btn btn-primary" onclick="toggleOrders()">查看全部工单</button>
=======
                <!-- <button class="btn btn-primary" onclick="loadAllOrders()">查看全部工单</button> -->
                <button class="btn btn-primary" id="toggleOrdersBtn" onclick="toggleOrders()">查看全部工单</button>
>>>>>>> 7dc62be152dedfe12301ff7e66fbff75e9ac9b30
            </div>
            <div id="order-container"></div>
        </div>

        <!-- 数据看板 -->
        <div class="module">
            <h2>工作数据</h2>
            <div class="stats-grid">
                <div class="stat-card" style="background:#e8f4ff;">
                    <div>本月完成</div>
                    <h3>42 件</h3>
                    <div>★★★★☆ 4.7</div>
                </div>
                <div class="stat-card" style="background:#fff3e0;">
                    <div>库存预警</div>
                    <h3>制冷剂</h3>
                    <div>仅余3罐</div>
                </div>
                <div class="stat-card" style="background:#f0f4f8;">
                    <div>设备状态</div>
                    <h3>2台待检</h3>
                    <div>3台正常</div>
                </div>
            </div>
        </div>

        <!-- 技术支持 -->
        <div class="module" style="background:var(--primary-blue);color:white;">
            <h2>支持系统</h2>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:30px;">
                <div>
                    <p>🆘 24小时热线</p>
                    <h3>400-810-1234</h3>
                </div>
                <div>
                    <p>👨💻 技术主管</p>
                    <h3>张工程师 138-0013-8000</h3>
                </div>
                <div>
                    <p>📧 邮件支持</p>
                    <h3>support@service.com</h3>
                </div>
            </div>
        </div>
    </div>

<<<<<<< HEAD
    <script>
        // 工单列表显示状态
        let ordersVisible = false;

        // 切换工单显示状态
        function toggleOrders() {
            const container = document.getElementById('order-container');
            const button = document.getElementById('toggle-orders-btn');

            if (!ordersVisible) {
                // 加载工单
                loadAllOrders();
                container.classList.add('show');
                button.textContent = '收回工单列表';
                ordersVisible = true;
            } else {
                // 隐藏工单
                container.classList.remove('show');
                button.textContent = '查看全部工单';
                ordersVisible = false;
            }
        }

=======
        <script>
        let isOrdersExpanded = false;
        let cachedOrders = null;
>>>>>>> 7dc62be152dedfe12301ff7e66fbff75e9ac9b30
        // 加载全部工单
        async function loadAllOrders() {
            try {
                const response = await fetch('/engineer_page/show_all_orders');
                if (!response.ok) {
                    throw new Error(`请求失败，状态码：${response.status}`);
                }
                const orders = await response.json();
                console.log("获取到的工单数据：", orders);
                renderOrders(orders);
            } catch (error) {
                console.error('加载失败:', error);
                showError(error.message);
            }
        }
<<<<<<< HEAD

        // 渲染工单（带完成按钮）
        function renderOrders(orders) {
            const container = document.getElementById('order-container');

            // 检查是否有工单数据
            if (!orders || orders.length === 0) {
                container.innerHTML = '<div class="no-tasks">当前没有待处理工单</div>';
                return;
            }

            const ordersHTML = orders.map(order => `
                <div class="task-item urgent-task">
                    <div class="task-info">
                        <h3>设备问题：${order.equipment_problem}</h3>
                        <p>设备型号：${order.equipment_type}</p>
                    </div>
                    <div class="task-info">
                        <p>用户名称：${order.username}</p>
                        <p>联系方式：${order.user_contact}</p>
                    </div>
                    <button class="btn btn-danger"
                            onclick="completeTask(this)"
                            data-username="${order.username}"
                            data-equipment-problem="${order.equipment_problem}"
                            data-equipment-type="${order.equipment_type}"
                            data-user-contact="${order.user_contact}">
                        完成工单
                    </button>
                </div>
            `).join('');

            container.innerHTML = ordersHTML;
=======
        // 切换工单
        async function toggleOrders() {
        const btn = document.getElementById('toggleOrdersBtn');
        const container = document.getElementById('order-container');
        
        if (!isOrdersExpanded) {
            btn.disabled = true;
            btn.innerHTML = '加载中<span class="loading-indicator"></span>';
            try {
                if (!cachedOrders) {
                    container.innerHTML = '<div class="loading-indicator">正在加载工单数据...</div>';
                    const response = await fetch('/engineer_page/show_all_orders');
                    if (!response.ok) throw new Error(`请求失败: ${response.status}`);
                    cachedOrders = await response.json();
                }
                
                renderOrders(cachedOrders);
                btn.textContent = '收起工单';
                isOrdersExpanded = true;
            } catch (error) {
                showError(error.message);
                btn.textContent = '查看全部工单';
            } finally {
                btn.disabled = false;
            }
        } else {
            container.innerHTML = '';
            btn.textContent = '查看全部工单';
            isOrdersExpanded = false;
>>>>>>> 7dc62be152dedfe12301ff7e66fbff75e9ac9b30
        }
    }
            // 渲染工单（带完成按钮）
            function renderOrders(orders) {
                const container = document.getElementById('order-container');
                let ordersHTML = '';

                if (orders.length === 0) {
                    ordersHTML = `
                        <div class="empty-state">
                            <img src="" />
                <h3>当前没有待处理工单</h3>
                <p>快去处理其他工作吧</p>
            </div>
        `;
                }else{
                const ordersHTML = orders.map(order => `
                    <div class="task-item urgent-task">
                        <div class="task-info">
                            <h3>设备问题：${order.equipment_problem}</h3>
                            <p>设备型号：${order.equipment_type}</p>
                        </div>
                        <div class="task-info">
                            <p>用户名称：${order.username}</p>
                            <p>联系方式：${order.user_contact}</p>
                        </div>
                        <button class="btn btn-danger"
                                onclick="completeTask(this)"
                                data-username="${order.username}"
                                data-equipment-problem="${order.equipment_problem}"
                                data-equipment-type="${order.equipment_type}"
                                data-user-contact="${order.user_contact}">
                            完成工单
                        </button>
                    </div>
                `).join('');
                }
                container.innerHTML = ordersHTML;
            }
        // 完成工单功能
        function completeTask(button) {
            const taskItem = button.closest('.task-item');
            if (!taskItem) return;

            // 从dataset获取属性（注意驼峰式转换）
            const params = {
                username: button.dataset.username,
                equipment_problem: button.dataset.equipmentProblem, // 注意属性名转换
                equipment_type: button.dataset.equipmentType,
                user_contact: button.dataset.userContact
            };

            // 编码特殊字符并发送请求
            const queryString = new URLSearchParams(params).toString();

            fetch(`/engineer_page/finish_order?${queryString}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => { throw new Error(text) });
                }
                taskItem.remove();

                // 检查是否还有工单，如果没有则显示空状态
                const container = document.getElementById('order-container');
                if (container.querySelectorAll('.task-item').length === 0) {
                    container.innerHTML = '<div class="no-tasks">当前没有待处理工单</div>';
                }
            })
            .catch(error => {
                console.error('失败:', error);
                alert(`操作失败: ${error.message}`);
            });
        }
<<<<<<< HEAD

=======
>>>>>>> 7dc62be152dedfe12301ff7e66fbff75e9ac9b30
        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('order-container');
            container.innerHTML = `
                <div class="task-item" style="border-color:red;background:#ffe6e6;">
                    <div class="task-info">
                        <h3 style="color:red;">❌ 错误：${message}</h3>
                    </div>
                </div>
            `;
        }
        // 过渡动画
        container.innerHTML = `
                <div class="task-list-enter-active">
                    ${ordersHTML}
                </div>
            `;
    </script> 
</body>
</html>